<template>
  <div>
    <div style="float: left; margin-left: 20px">
      <el-button @click="turnUpdate" size="small">上报</el-button>
    </div>
    <h1 style="text-align: center">各省份疫情情况一览</h1>

    <div
      id="content"
      style="height: 800px"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    ></div>
    <div style="text-align: center">
      <el-pagination
        layout="prev, pager, next"
        :total="dataList.total"
        :page-size="obj.pageSize"
        :current-page="obj.page"
        @current-change="change_page"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  // 将分页查询的疫情数据的前十条显示到折线图中
  // x轴显示省份，y轴显示死亡人数
  mounted() {
    this.initEchart();
  },
  computed: {
    ...mapState("dataList", ["dataList"]),
  },
  data() {
    return {
      id: 0,
      loading: true,
      obj: {
        page: 1,
        pageSize: 10,
      },
      val: 1,
    };
  },
  // 组件销毁，也就是离开当前页面
  destroyed() {
    clearInterval(this.id);
  },
  created() {
    this.page_query(this.obj);

    setTimeout(() => {
      this.loading = false;
      this.findData();
    }, 1000);
  },
  watch: {
    obj: {
      handler: function () {
        this.page_query(this.obj).then(() => {
          let res1 = this.dataList.list.map((item) => {
            return item.province;
          });
          let res2 = this.dataList.list.map((item) => {
            return item.confirmed;
          });
          let res3 = this.dataList.list.map((item) => {
            return item.suspected;
          });
          let res4 = this.dataList.list.map((item) => {
            return item.cure;
          });
          let res5 = this.dataList.list.map((item) => {
            return item.dead;
          });

          this.initEchart(res1, res2, res3, res4, res5);
        });
      },
      deep: true,
    },
  },
  methods: {
    ...mapActions("dataList", ["page_query"]),
    change_page(val) {
      this.obj.page = val;
      this.val = val;
    },
    turnUpdate() {
      this.$router.push({
        path: "/data_list/updata",
      });
    },
    findData() {
      this.page_query(this.obj).then(() => {
        let res1 = this.dataList.list.map((item) => {
          return item.province;
        });
        let res2 = this.dataList.list.map((item) => {
          return item.confirmed;
        });
        let res3 = this.dataList.list.map((item) => {
          return item.suspected;
        });
        let res4 = this.dataList.list.map((item) => {
          return item.cure;
        });
        let res5 = this.dataList.list.map((item) => {
          return item.dead;
        });

        this.initEchart(res1, res2, res3, res4, res5);
      });
    },

    // 初始化图表
    initEchart(res1, res2, res3, res4, res5) {
      // 销毁图表
      echarts.init(document.getElementById("content")).dispose();
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("content"));

      var posList = [
        "left",
        "right",
        "top",
        "bottom",
        "inside",
        "insideTop",
        "insideLeft",
        "insideRight",
        "insideBottom",
        "insideTopLeft",
        "insideTopRight",
        "insideBottomLeft",
        "insideBottomRight",
      ];

      app.configParameters = {
        rotate: {
          min: -90,
          max: 90,
        },
        align: {
          options: {
            left: "left",
            center: "center",
            right: "right",
          },
        },
        verticalAlign: {
          options: {
            top: "top",
            middle: "middle",
            bottom: "bottom",
          },
        },
        position: {
          options: echarts.util.reduce(
            posList,
            function (map, pos) {
              map[pos] = pos;
              return map;
            },
            {}
          ),
        },
        distance: {
          min: 0,
          max: 100,
        },
      };

      app.config = {
        rotate: 90,
        align: "left",
        verticalAlign: "middle",
        position: "insideBottom",
        distance: 15,
        onChange: function () {
          var labelOption = {
            normal: {
              rotate: app.config.rotate,
              align: app.config.align,
              verticalAlign: app.config.verticalAlign,
              position: app.config.position,
              distance: app.config.distance,
            },
          };
          myChart.setOption({
            series: [
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
            ],
          });
        },
      };

      var labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: "{c}  {name|{a}}",
        fontSize: 16,
        rich: {
          name: {
            textBorderColor: "#fff",
          },
        },
      };

      // 指定图表的配置项和数据
      var option = {
        color: ["#003366", "#006699", "#4cabce", "#e5323e"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data:["确诊","疑似","治愈","死亡"]
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar", "stack", "tiled"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: [
          {
            type: "category",
            data: res1,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "确诊",
            type: "bar",
            barGap: 0,
            label: labelOption,
            data: res2,
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值",
                },
              ],
        },
          },
          {
            name: "疑似",
            type: "bar",
            label: labelOption,
            data: res3,
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值",
                },
              ],
        },
          },
          {
            name: "治愈",
            type: "bar",
            label: labelOption,
            data: res4,
                        markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值",
                },
              ],
        },
          },
          {
            name: "死亡",
            type: "bar",
            label: labelOption,
            data: res5,
            markPoint: {
            data: [
            {
            type: "max",
            name: "最大值",
            },
            ],
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>